<template>
    <view>
        <image class="topic_backgroud" :src="topicData.picAbsolute" :style="{ height: top + 'rpx' }"></image>
        <view
            class="search_top_nav"
            v-if="top == 400"
            :style="{ height: top + 'rpx' }"
            style="top: 0; background: rgba(0, 0, 0, 0.4)"
        >
            <view :style="{ height: statusBarHeight }" class="status_bar"></view>
            <view :style="{ height: statusBarHeight }" class="status_bars"></view>
            <view class="search_nav_content" :style="{ background: bgColor }">
                <view @click="back" style="width: 76rpx; height: 88rpx">
                    <image
                        style="margin-left: 28rpx; height: 36rpx; width: 20rpx; margin-top: 26rpx"
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/back1.png"
                        v-if="topFlag"
                    ></image>
                    <image
                        style="margin-left: 28rpx; height: 36rpx; width: 20rpx; margin-top: 26rpx"
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/back.png"
                        v-else
                    ></image>
                </view>
                <label class="search_title" style="color: #fff; width: 36%; left: 32%" v-if="topFlag">
                    {{
                        topicData.name != null && topicData.name.split(' ').length > 5
                            ? topicData.name
                            : topicData.name.slice(0, 5)
                    }}</label
                >
                <label class="search_title" style="color: #333; width: 36%; left: 32%" v-else>
                    {{
                        topicData.name != null && topicData.name.split(' ').length > 5
                            ? topicData.name
                            : topicData.name.slice(0, 5)
                    }}</label
                >
            </view>
        </view>

        <view class="topic_backgroud_main" :style="{ height: top + 'rpx' }" v-if="top == 512">
            <view :style="{ height: statusBarHeight }" class="status_bars"></view>
            <view @click="back" class="back_view">
                <image class="back_logo" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/topic_back.png"></image>
            </view>
            <!-- v-if="topicData.follows && topicData.trends" -->
            <view class="topic_info_nav">
                <view class="topic_info_top">
                    <label class="topic_name">{{ topicData.name }}</label>
                    <label class="topic_inf">{{ topicData.follows }}人参与·{{ topicData.trends }}条讨论</label>
                </view>
                <view v-if="topicData.followStatus == 1" @click="followEvent" class="followed-btn">已关注</view>
                <view v-else @click="followEvent" class="follow-btn">
                    <image style="width: 16rpx; height: 16rpx" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/topic_add.png">
                    </image>
                    <label style="margin-left: 8rpx; color: #fff; font-size: 24rpx">关注</label>
                </view>
            </view>
            <view class="topic_content">
                <text class="topic_title" @click="showall = true">{{ introduction }}</text>
                <!-- <text class="topic_btn"  @click="showall=true" v-if="topicData.introduction.length>50">全部</text> -->
            </view>
        </view>

        <view class="dynamic_view">
            <!-- 话题排序 -->
            <view class="dynamic_nav">
                <label style="color: #333333; font-size: 32rpx; font-weight: 500">动态</label>
                <view
                    style="
                        margin-right: 0rpx;
                        margin-left: auto;
                        display: flex;
                        flex-direction: row-reverse;
                        align-items: center;
                    "
                >
                    <label @click="filterEvent(1)" :class="isTime == 1 ? 'shaixuan_sel' : 'shaixuan'">按时间</label>
                    <label
                        @click="filterEvent(2)"
                        style="margin-right: 32rpx"
                        :class="isTime == 2 ? 'shaixuan_sel' : 'shaixuan'"
                        >按点赞</label
                    >
                </view>
            </view>
            <!-- 话题列表 -->
            <view class="search-main" style="margin: 0rpx auto">
                <!-- 话题详情 -->
                <view @click="goToDetail(index)" class="article-main" v-for="(item, index) in dynamicList" :key="index">
                    <view class="search-article">
                        <view @click.stop="goToHomePageId(item.userId)" class="article-left">
                            <view style="background-color: #eaeaea; border-radius: 50%" class="article-avatar">
                                <u-image width="80rpx" height="80rpx" :src="item.avatarAbsolute" shape="circle">
                                </u-image>
                            </view>
                            <view class="article-title1">
                                <view>{{ item.userName }}</view>
                                <view class="article-time"
                                    >{{ request.getDateTimeFormat(item.publishTime) }}
                                    <text>发布了</text>
                                </view>
                            </view>
                        </view>
                        <view v-if="userInfo.uid != item.userId">
                            <view class="search-right1" @click.stop="goCollect(item)" v-if="item.followStatus == 0">
                                <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/search/add.png" mode=""></image>关注
                            </view>
                            <view class="search-right2" v-else @click.stop="goCollect(item)">已关注</view>
                        </view>
                    </view>
                    <view class="articleTitle">{{ item.title }}</view>
                    <view class="articleContent">{{ item.experience }}</view>
                    <view style="position: relative" v-if="item.picList.length > 0" class="articleImg">
                        <image
                            v-for="(img, previewKey) in item.picList.slice(0, 3)"
                            @click.stop="showImagePrevie(previewKey, item.picList)"
                            :key="previewKey"
                            :src="img"
                            mode=""
                        >
                        </image>
                        <label
                            v-if="item.picList.length > 3"
                            style="
                                border-top-left-radius: 10rpx;
                                border-bottom-right-radius: 24rpx;
                                line-height: 48rpx;
                                width: 48rpx;
                                height: 48rpx;
                                text-align: center;
                                font-size: 22rpx;
                                color: #fff;
                                background-color: rgba(0, 0, 0, 0.4);
                                position: absolute;
                                float: right;
                                top: auto;
                                bottom: 0;
                                right: 10rpx;
                            "
                            >+{{ item.picList.length - 3 }}</label
                        >
                    </view>
                    <view class="articleBottom">
                        <view class="article-message">
                            <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_comment.png"></image
                            ><text>{{ item.comments }}</text>
                        </view>
                        <view @click.stop="doTrends(item)" class="article-message">
                            <image
                                v-if="item.thumbsStatus == 0"
                                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_good.png"
                            ></image>
                            <image
                                v-if="item.thumbsStatus == 1"
                                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_good_sel.png"
                            ></image>
                            <text v-if="item.thumbsStatus == 0">{{ item.thumbs }}</text>
                            <text v-if="item.thumbsStatus == 1" style="color: #ff6f89">{{ item.thumbs }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <view
                v-if="dynamicList.length == 0 && isloading == false"
                style="
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 100%;
                    background-color: #f8f8f8;
                "
            >
                <image
                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/comments_null.png"
                    style="margin-top: 136rpx; width: 316rpx; height: 316rpx"
                ></image>
                <label style="margin-top: 20rpx; color: #272a37; font-size: 32rpx"
                    >当前话题暂无动态,快来发布第一条动态吧~</label
                >
            </view>
            <u-loadmore
                v-if="more"
                :status="status"
                loadingText="加载中"
                loadmoreText="上拉加载更多"
                nomoreText="已经到底啦～"
                fontSize="28"
                iconSize="30"
                marginTop="30"
                marginBottom="30"
            ></u-loadmore>
        </view>
        <bottom-small-btn-view btnTitle="立即参与" @commit="goToPublishDynamic"></bottom-small-btn-view>
        <popup-text :text="topicData.introduction" :showall="showall" @close="close"></popup-text>
        <!-- showall -->
        <view style="height: 120rpx"></view>
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
export default {
    data() {
        return {
            id: '',
            topicData: {introduction: ''},
            dynamicList: [],
            statusBarHeight: statusBarHeight,
            isTime: 0,
            trendForm: {
                pageNum: 1,
                pageSize: 10,
                isAsc: 'descending',
                orderByColumn: 'top desc,topTime desc,publishTime',
            },
            status: 'loadmore',
            more: false,
            isloading: false,
            showall: false,
            introduction: '',
            top: 512,
            topFlag: true,
            bgColor: '',
        };
    },
    computed: {
        ...mapState(['isLogin', 'userInfo']),
    },
    onReachBottom() {
        if (this.more == false) return;
        this.status = 'loading';
        this.trendForm.pageNum = ++this.trendForm.pageNum;
        this.requestDynamicList(false);
    },
    onPageScroll(e) {
        if (e.scrollTop > 30) {
            this.top = 400;
            // this.bgColor='black'
        } else if (e.scrollTop < 30) {
            this.top = 512;
        }

        if (e.scrollTop < 150) {
            this.topFlag = true;
            this.bgColor = '';
        } else if (e.scrollTop >= 150) {
            this.topFlag = false;
            this.bgColor = 'white';
        }
    },
    methods: {
        ...mapMutations(['loginSaveUserInfo', 'logout']),
        showImagePrevie(index, urls) {
            uni.previewImage({
                urls,
                current: index,
            });
        },
        requestUser() {
            this.request
                .httpTokenRequest(`/mp-api/wx/user/detail/${this.userInfo.uid}`, null, 'POST', true)
                .then((res) => {
                    if (res.code == 0) {
                        this.loginSaveUserInfo(res.data);
                    }
                });
        },
        isAuthNicknamePhone() {
            if (this.userInfo.nickname == '' || this.userInfo.nickname == null || this.userInfo.nickname == undefined) {
                this.authUserInfo();
                return false;
            }
            if (this.userInfo.phone == '' || this.userInfo.phone == null || this.userInfo.phone == undefined) {
                uni.navigateTo({
                    url: '/pages/login/login',
                });
                return false;
            }
            return true;
        },

        authUserInfo() {
            uni.getUserProfile({
                desc: 'Wexin',
                success: (res) => {
                    let avatar = res.userInfo.avatarUrl;
                    let nickname = res.userInfo.nickName;
                    this.sendUserInfo(avatar, nickname);
                },
            });
        },
        sendUserInfo(avatar, nickname) {
            var postData = {};
            postData.uid = this.userInfo.uid;
            postData.avatar = avatar;
            postData.nickname = nickname;
            this.request.httpTokenJsonRequest('/mp-api/wx/user/update', postData, 'POST', false).then((res) => {
                if (res.code == 0) {
                    if (res.data.phone == '' || res.data.phone == null || res.data.phone == undefined) {
                        uni.navigateTo({
                            url: '/pages/login/login',
                        });
                    }
                    this.requestUser();
                }
            });
        },
        filterEvent(e) {
            this.isTime = e;
            this.requestDynamicList(true);
        },
        back() {
            uni.navigateBack();
        },
        requestTopicDetail() {
            this.request
                .httpTokenJsonRequest(`/mp-api/wx/topic/details/${this.id}`, null, 'POST', false)
                .then((res) => {
                    if (res.code == 0) {
                        this.introduction =
                            res.data.introduction.length > 50
                                ? res.data.introduction.substring(0, 48) + '...全部'
                                : res.data.introduction;
                        this.topicData = res.data;
                    }
                });
        },
        requestDynamicList(isFresh) {
            if (isFresh) {
                this.trendForm.pageNum = 1;
                this.trendForm.pageSize = 10;
                this.isloading = true;
            }
            if (this.isTime == 1) {
                this.trendForm.orderByColumn = 'publishTime';
            } else if (this.isTime == 2) {
                this.trendForm.orderByColumn = 'thumbs';
            } else {
                this.trendForm.orderByColumn = 'top desc, top_time desc,publishTime';
            }
            this.request
                .httpTokenRequest(`/mp-api/wx/trends/topic/list/${this.id}`, this.trendForm, 'POST', true)
                .then((res) => {
                    uni.stopPullDownRefresh();
                    this.isloading = false;
                    if (res.code == 0) {
                        if (res.data.list && isFresh) {
                            this.dynamicList = res.data.list;
                        } else {
                            res.data.list.forEach((item) => {
                                this.dynamicList.push(item);
                            });
                        }
                        if (res.data.total > this.dynamicList.length) {
                            this.status = 'loadmore';
                            this.more = true;
                        } else {
                            this.more = false;
                            this.status = 'nomore';
                        }
                    } else {
                        this.more = false;
                        this.status = 'nomore';
                    }
                });
        },
        goToHomePageId(userId) {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            uni.navigateTo({
                url: `/packageMine/pages/homepage/homepage?userId=${userId}`,
            });
        },
        goToPublishDynamic() {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            uni.navigateTo({
                url: `/pages/community/publishDynamic/publishDynamic?topicId=${this.topicData.id}&topicName=${this.topicData.name}`,
            });
        },
        goToDetail(index) {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            uni.navigateTo({
                url: `/pages/community/dynamicDetail/dynamicDetail?id=${this.dynamicList[index].id}`,
            });
        },
        followEvent() {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            if (this.topicData.followStatus == 1) {
                uni.showModal({
                    cancelText: '取消',
                    confirmText: '确定',
                    title: '是否确认取消关注此话题？',
                    success: (res) => {
                        if (res.confirm) {
                            this.sendFollowRequest();
                        }
                    },
                });
            } else {
                this.sendFollowRequest();
            }
        },
        close() {
            this.showall = false;
        },
        sendFollowRequest() {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            var form = {};
            if (this.topicData.followStatus == 1) {
                form.id = this.id;
                form.followStatus = 0;
            } else {
                form.id = this.id;
                form.followStatus = 1;
            }
            this.request.httpTokenJsonRequest('/mp-api/wx/topic/follow', form, 'POST', true).then((res) => {
                if (res.code == 0) {
                    if (this.topicData.followStatus == 0) {
                        this.topicData.followStatus = 1;
                    } else {
                        this.topicData.followStatus = 0;
                    }
                }
            });
        },
        goCollect(item) {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            let form = {
                id: item.userId,
                followStatus: 1,
            };
            if (item.followStatus == 0) {
                form.followStatus = 1;
                this.request.httpTokenJsonRequest('/mp-api/wx/user/follow', form, 'POST', true).then((res) => {
                    if (res.code != 0) {
                        uni.showToast({
                            icon: 'none',
                            title: res.message,
                        });
                    } else {
                        this.dynamicList.forEach((dynamicI) => {
                            if (dynamicI.userId == item.userId) {
                                dynamicI.followStatus = 1;
                            }
                        });
                    }
                });
            } else {
                uni.showModal({
                    cancelText: '取消',
                    confirmText: '确定',
                    title: '是否确认取消关注此用户？',
                    success: (res) => {
                        if (res.confirm) {
                            form.followStatus = 0;
                            this.request
                                .httpTokenJsonRequest('/mp-api/wx/user/follow', form, 'POST', true)
                                .then((res) => {
                                    if (res.code != 0) {
                                        uni.showToast({
                                            icon: 'none',
                                            title: res.message,
                                        });
                                    } else {
                                        this.dynamicList.forEach((dynamicI) => {
                                            if (dynamicI.userId == item.userId) {
                                                dynamicI.followStatus = 0;
                                            }
                                        });
                                    }
                                });
                        }
                    },
                });
            }
        },
        doTrends(item) {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            let form = {
                id: item.id,
                thumbsStatus: 1,
            };
            if (item.thumbsStatus == 0) {
                form.thumbsStatus = 1;
                this.request.httpTokenJsonRequest('/mp-api/wx/trends/thumbs', form, 'POST', true).then((res) => {
                    if (res.code != 0) {
                        uni.showToast({
                            icon: 'none',
                            title: res.message,
                        });
                    } else {
                        item.thumbsStatus = 1;
                        item.thumbs = item.thumbs + 1;
                    }
                });
            } else {
                form.thumbsStatus = 0;
                this.request.httpTokenJsonRequest('/mp-api/wx/trends/thumbs', form, 'POST', true).then((res) => {
                    if (res.code != 0) {
                        uni.showToast({
                            icon: 'none',
                            title: res.message,
                        });
                    } else {
                        item.thumbsStatus = 0;
                        if (item.thumbs > 0) {
                            item.thumbs = item.thumbs - 1;
                        }
                    }
                });
            }
        },
    },
    onLoad(option) {
        this.id = option.id;
        this.requestTopicDetail();
    },
    onShow() {
        this.requestDynamicList(true);
    },
};
</script>

<style scoped>
.topic_backgroud {
    height: 512rpx;
    width: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
}

.topic_backgroud_main {
    height: 512rpx;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
}

.back_view {
    height: 88rpx;
    width: 88rpx;
}

.back_logo {
    width: 20rpx;
    height: 36rpx;
    margin-left: calc(50% - 10rpx);
    margin-top: calc(50% - 18rpx);
}

.status_bars {
    height: 20px;
    width: 100%;
}

.status_bar {
    position: fixed;
    z-index: 998;
    height: 20px;
    width: 100%;
    background-color: #fff;
}

.topic_info_nav {
    margin-top: 58rpx;
    margin-left: 30rpx;
    display: flex;
    flex-direction: row;
    width: calc(100% - 60rpx);
}

.topic_info_top {
    margin-top: 0rpx;
    width: calc(100% - 120rpx);
    display: flex;
    flex-direction: column;
}

.topic_name {
    color: #ffffff;
    width: 100%;
    font-size: 36rpx;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 500;
}

.topic_inf {
    margin-top: 4rpx;
    color: #cccccc;
    font-size: 24rpx;
}

.follow-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 8rpx;
    margin-left: auto;
    margin-right: 0;
    width: 112rpx;
    height: 48rpx;
    border-radius: 52rpx;
    border: 2rpx solid #ffffff;
}

.followed-btn {
    margin-top: 8rpx;
    margin-left: auto;
    margin-right: 0;
    width: 112rpx;
    height: 48rpx;
    border-radius: 24rpx;
    border: 2rpx solid #ffffff;
    color: #fff;
    font-size: 24rpx;
    line-height: 48rpx;
    text-align: center;
}

.topic_content {
    /* display: flex;align-items: center; */
    margin-left: 30rpx;
    position: relative;
    width: calc(100% - 60rpx);
    margin-top: 20rpx;
}

/* .topic_content::after{content: '全部';bottom: 0;right: ;} */
.topic_title {
    line-height: 44rpx;
    height: 88rpx;
    color: #cccccc;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 26rpx;
    position: relative;
}

.topic_title::after {
    position: absolute;
    right: 0;
    content: '';
    width: 100rpx;
    height: 20rpx;
    bottom: 0;
}

.topic_btn {
    position: absolute;
    bottom: 0;
    right: 0;
    color: #fff;
    color: #cccccc;
    font-size: 28rpx;
    font-weight: 600;
}

/* .topic_content_text{display: flex;align-items: center;} */
/* .topic_btn {
    position: relative;
    clear: both;
    padding: 0 8px;
    color: #fff;
    line-height: 20px;
    cursor: pointer;
  } */

.dynamic_nav {
    height: 104rpx;
    margin-left: 30rpx;
    width: calc(100% - 60rpx);
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: #f6f6f6 2rpx solid;
}

.dynamic_view {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
    border-radius: 40rpx 40rpx 0px 0px;
    z-index: 100;
    margin-top: -40rpx;
}

.shaixuan {
    color: #999999;
    font-size: 28rpx;
}

.shaixuan_sel {
    color: #009977;
    font-size: 28rpx;
    font-weight: 500;
}
</style>
